import React,{Component} from 'react';
import './mobile.less';
import {Icon,Tooltip} from 'antd';
import menu from '../mobileLang';
const prefix = 'mobile-navigation';
const titleStyle = {
    fontWeight:'bold',
    fontSize:'14px',
    lineHeight:'28px',
    color:'#000'
};
const listStyle = {
    lineHeight:'24px'
};
const linkStyle = {
    display:'block',
    paddingLeft:'10px',
    width:'100%',
    height:'100%',
    color:'#666'
};
class Mobile extends Component{
    state = {
        visible:false
    };
    iconClick = () =>{
        this.setState((prevState) => ({
            visible:!prevState.visible
        }))
    };
    render(){
        let menuEle = menu.map((value,index)=>{
            return(
                value.children?
                    <span key={index} className={prefix+'-list-index'}>
                        <ul>
                            <a href={value.link} style={titleStyle}>
                                {value.name}
                            </a>
                            {value.children.map((children,key)=>{
                                return(
                                    <li key={key} style={listStyle}>
                                        <a href={children.link} style={linkStyle}>{children.name}</a>
                                    </li>
                                )
                            })}
                        </ul>
                    </span>:
                    <a key={index} className={prefix+"-list-index"} style={titleStyle} href={value.link}>
                        {value.name}
                    </a>
            )
        })
        return(
            <div className={prefix}>
                <div className={prefix+'-container'}>
                    <img src={require('../img/logo.png')} alt=""/>
                </div>
                <div className={prefix+"-menu-container"}>
                    <Tooltip title={
                        <div className={prefix+"-menu-list"}>
                            {menuEle}
                        </div>
                    } placement="bottomRight" overlayClassName={prefix+'-menu'} visible={this.state.visible}>
                        <Icon type="bars" style={{ fontSize: '30px'}} className={prefix+'-icon'} onClick={this.iconClick}/>
                    </Tooltip>
                </div>
            </div>
        )
    }
};
export default Mobile;